<template>
  <div class="text-fontPrimary">
    <div
      class="w-full relative top-0 left-0 z-10 text-white"
      :style="{
        height: '140px',
        backgroundImage: `url(${FriendInfo.bgImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }"
    >
      <div class="w-full absolute top-0 p-2 text-white">
        <p class="iconfont icon-guanbi text-end cursor-pointer" @click="closeDetail"></p>
      </div>
      <div class="w-full absolute bottom-2 flex flex-row px-3 justify-between items-center text-base">
        <div class="flex flex-row items-center gap-3">
          <n-avatar :src="FriendInfo.avatar" :size="48" />
          <div>
            <p>{{ FriendInfo.name }}</p>
            <p class="text-xs">{{ FriendInfo.sign }}</p>
          </div>
        </div>
        <div class="flex flex-row items-center justify-center gap-1">
          <i class="iconfont icon-dianzan"></i>
          999+
        </div>
      </div>
    </div>
    <div class="w-full h-[calc(100vh-140px)] flex flex-col gap-3 py-3 px-4 overflow-y-auto">
      <!-- 置顶和免打扰 -->
      <div class="bg-Input p-2 text-center rounded">
        <p class="flex flex-row justify-between items-center">
          <span>设为置顶</span>
          <n-switch v-model:value="isPined" />
        </p>
        <div class="w-full h-[1px] bg-bgBorder m-[10px_0]"></div>
        <p class="flex flex-row justify-between items-center">
          <span>消息免打扰</span>
          <n-switch v-model:value="isDisturb" />
        </p>
      </div>
      <div class="bg-Input p-1.5 text-center rounded cursor-pointer" @click="DeleteAllMessage">删除聊天记录</div>
      <div class="bg-Input p-1.5 text-red-600 text-center rounded cursor-pointer">删除好友</div>
      <p class="text-[10px] py-3 text-blue-500 text-center cursor-pointer">被骚扰了？举报该用户</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { IFriendListItem } from "@/types/friend.ts";
import { ChatType } from "@/types/chat.ts";
import { useChat } from "@/store/modules/chat.ts";
import { useCache } from "@/store/modules/cache.ts";
import { useUser } from "@/store/modules/user.ts";
import { useSession } from "@/store/modules/session.ts";
import { ElMessage } from "element-plus";
import { NAvatar, NSwitch } from "naive-ui";

const user = useUser();
const chat = useChat();
const session = useSession();
const cache = useCache();
let isDisturb = ref(false);

//自动同步置顶状态
const isPined = computed({
  get() {
    const sessionId = chat.ChatObject?.sessionId;
    if (!sessionId) return false;
    const sessionItem = session.SessionList.find((s) => s.sessionId === sessionId);
    return !!sessionItem && sessionItem.isPinned === 1;
  },
  set(val: boolean) {
    if (!chat.ChatObject) return;
    session.UpdateSessionByField(chat.ChatObject.sessionId, { isPinned: val ? 1 : 0 }, true);
  },
});
// 获取好友详情
const FriendInfo = computed((): IFriendListItem => {
  if (!chat.ChatObject) return {} as IFriendListItem;
  let info = cache.GetFriendInfo(chat.ChatObject.id);
  if (!info) return {} as IFriendListItem;
  return info;
});

withDefaults(
  defineProps<{
    closeDetail: (event: MouseEvent) => void;
  }>(),
  {
    closeDetail: () => {},
  },
);

// 删除全部消息
async function DeleteAllMessage() {
  if (!chat.ChatObject) return;
  let res = await window.electronApi.deleteMessageByAll(user.userId!, chat.ChatObject.id, ChatType.friend);
  if (!res) {
    ElMessage.error("删除聊天记录失败");
    return;
  }
  ElMessage.success("删除聊天记录成功");
  chat.MessageList = [];
  session.UpdateSessionByField(chat.ChatObject.sessionId, { content: "" }, true);
}
</script>

<style lang="scss" scoped></style>
